<template>
  <div class="absolute h-full top-0 right-0">
    <Drawer :visible="visible" background-color="#272424f5">
      <div class="flex gap-2 p-3 flex-wrap">
        <div class="flex gap-2 flex-column" v-for="item in props.userList" :key="item.id">
          <Avatar :image="item.avatar" class="mr-2 ml-2" />
          <span>{{ item.username }}</span>
        </div>
        <div class="flex gap-2 flex-column cursor-pointer" @click="handleAddUser">
          <i class="pi pi-user-plus" style="color: ##00000094; font-size: 2rem; margin-top: -1px"></i>
          <span class="text-sm" >添加</span>
        </div>
      </div>
      <Divider />
      <div class="flex flex-column">
        <Button label="清空聊天记录" severity="danger" text />
        <Button label="退出群聊" severity="danger" text @click="handleExitGroup" />
      </div>
    </Drawer>
  </div>
  <AddGroupUserModal v-model:groupUserVisible="groupUserVisible" />
</template>

<script setup lang="ts">
import Drawer from '@/components/Drawer/index.vue'
import type { TUserModel } from '@/stores/typings/user';
import { Avatar, Sidebar, Divider, Button } from '@/utils/primevue'
import AddGroupUserModal from './AddGroupUserModal.vue';
import { ref } from 'vue';
import useChatStore from '@/stores/chat'

const chatStore = useChatStore()

const groupUserVisible = ref(false)

const handleAddUser = () => {
  console.log('**********', groupUserVisible.value)
  groupUserVisible.value = true
  chatStore.queryUserListByUserId(() => {})
}

const props = defineProps<{
  visible: boolean,
  userList: TUserModel[]
}>()

// 点击退出群聊
const handleExitGroup = () => {
  chatStore.existGroup()
}
</script>

<style scoped lang="scss">
</style>
